<template>
  <div class="app-select-container">
    <template
      v-for="g in appGroups">
      <div
        class="app-box w-full"
        :key="`g_${g.group_id}`"
        v-if="$menuUtils.isAppGroup(g) && g.subs?.length"
      >
        <div class="app-group-title" v-text="g.group_name"></div>
        <div class="app-box-body">
          <template
            v-for="app in g.subs"
          >
            <div
              class="app-infobox-info-wrap"
              @click="selectApp(app)"
            >
              <div
                class="app-infobox-icon"
                :style="$menuUtils.getIconStyle(app)">
                <img
                  v-if="$menuUtils.getIconImg(app)"
                  :src="$menuUtils.getIconImg(app)"
                />
                <JIcon
                  v-else-if="$menuUtils.getIconFont(app)"
                  class="app-icon-white"
                  :icon="$menuUtils.getIconFont(app)"
                />
              </div>
              <JText :content="app.group_name" class="app-infobox-title"></JText>
<!--                <div class="app-infobox-tip">{{ getAppUserTypeLabel(app.user_type) }}</div>-->
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import _ from 'lodash';
import { $menuUtils } from "@jzl/utils";
import {api} from "@jzl/api";
import {useRoute} from "vue-router";
import {DFT_ICONS} from "@jzl/icons";
import useApps from './hooks/useApps.js'
import { isAppGroup } from '@jzl/utils/menu.js';

const route = useRoute();
const emit = defineEmits(['select'])
const {
  apps,
  appGroups,
  loadApps
} = useApps();

watch(() => route, () => {
  loadApps();
},  { deep: true, immediate: true });

const selectApp = (app) => {
  emit('select', app)
}
</script>

<style lang="scss" scoped>
.app-select-container {
  padding-top: 5px;
}
.app-group-title {
  font-size: 12px;
  padding: 5px 10px 2px;
}
.app-infobox-info-wrap {
  padding: 8px 10px;
  margin: 0px;
  cursor: pointer;

  &:hover {
    background: var(--j-fill-color-light);
  }
}
.app-infobox-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;

  > .j-icon {
    font-size: 16px;
  }
}
.app-infobox-title {
  font-size: 12px;
  padding-left: 10px;
  font-weight: normal;
}
</style>
